<template>
  <div class="index">
    <div class="banner">
      <!-- <el-carousel :loop="true"  height="210px">
        <el-carousel-item v-for="item in images" :key="item"
          <NuxtImg  :src="`/img/${item}`" alt="">
        </el-carousel-item>
      </el-carousel> -->
      <Skeleton :loading="loading">
        <template #ske>
          <div class="img">
            <el-skeleton-item v-for="item in images" :key="item" variant="image"
              style="height: 156px; width: 32.6%;border-radius: 10px;" />
          </div>
        </template>
        <template #main>
          <div class="img">
            <NuxtImg v-for="item in images" :key="item" :src="`/img/${item}`" alt="" />
          </div>
        </template>
      </Skeleton>

      <div class="dot">

      </div>
    </div>
    <Skeleton :loading="loading">
      <template #ske>
        <div style="width: 100%;height: 42px;display: flex;justify-content: space-between;align-items: center;">
          <el-skeleton-item variant="text" style=" width: 26px;height: 30px;margin-right: 10px;" />
          <el-skeleton-item variant="text" style=" flex: 1;height: 30px;" />
        </div>
      </template>
      <template #main>
        <div class="notice">
          <NuxtImg src="/img/lb.png" alt="" />
        </div>
      </template>

    </Skeleton>

    <Skeleton :loading="loading">
      <template #ske>
        <div class="tablist">
          <el-skeleton-item v-for="(item, index) in tablist" :key="index + 'l'" variant="text"
            style=" width: 80px;height: 30px;margin-right: 10px;" />
        </div>
      </template>
      <template #main>
        <div class="tablist">
          <div v-for="(item, index) in tablist" :key="index" @click="item.callback(index)"
            :class="activeindex == index ? 'active' : ''">
            <NuxtImg v-if="activeindex != index" :src="item.img" alt="" />
            <NuxtImg v-else :src="item.imgactive" alt="" />
            <span>{{ $t(item.lang) }}</span>
          </div>
        </div>
        <div class="tabcontexts" :class="[3, 6, 7].includes(activeindex) ? 'appearcontext' : ''">
          <div>
            <el-select v-model="privider" :placeholder="$t('language.home.searchselect1')" style="width: 24%">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select v-model="tags" :placeholder="$t('language.home.searchselect2')" style="width: 24%">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select v-model="player" :placeholder="$t('language.home.searchselect3')" style="width: 24%">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div>
            <el-input v-model="searchValue" style="width: 240px">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <search />
                </el-icon>
              </template>
            </el-input>
          </div>
        </div>
      </template>
    </Skeleton>

    <ul class="game">
      <li v-for="(item, index) in  hangleGameList" :key="index">
        <Skeleton :loading="loading">
          <template #ske>
            <div class="title">
              <el-skeleton-item variant="text" style=" width: 150px;height: 30px;" />
              <el-skeleton-item variant="text" style=" width: 200px;;height: 30px;" />
            </div>
          </template>
          <template #main>
            <div class="title">
              <div class="title-left">
                <NuxtImg :src="item.namelogo" alt="" />
                <span>{{ $t(item.modulename) }}</span>
              </div>
              <div class="title-right">
                <strong>All {{ item.children.length }}</strong>
                <p>
                  <NuxtImg class="changeimg" @click="prelist(item, index)" :class="item.start == 1 ? 'opacity' : ''"
                    src="/img/imgleft.png" alt="" />
                  <NuxtImg class="changeimg" :class="item.start == getList(item.children) ? 'opacity' : ''"
                    @click="nextlist(item, index)" src="/img/imgright.png" alt="" />
                </p>
              </div>
            </div>
          </template>
        </Skeleton>
        <Skeleton :loading="loading">
          <template #ske>
            <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
              <div
                style="display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;width: 15.4%;"
                v-for="(child, index) in 6" :key="index + '3'">
                <el-skeleton-item variant="text" style=" width: 150px;height: 30px;margin-bottom: 15px;" />
                <el-skeleton-item variant="image" style=" width: 100%;;height: 200px;border-radius: 10px;" />
              </div>

            </div>
          </template>
          <template #main>
            <dl :ref="(el: refItem) => handleSetFromMap(el, index, item.children)"
              :style="{ width: 100 * getList(item.children) + '%' }">
              <template v-for="(child, index) in getList(item.children)" :key="index + '0'">
                <dd>
                  <div @click="openurl(sun)" v-for="(sun, ind) in item.children.slice(6 * index, 6 * (index + 1))">
                    <h3>{{ sun.name }}</h3>
                    <div class="mainimg">
                      <NuxtImg lazy="loading" :src="sun.img" lowsrc="/img/hfire.p" alt="" />
                      <NuxtImg  class="target" :src="sun.topleft" alt="" />
                    </div>
                  </div>
                  <div v-for="zz in (6 - item.children.slice(6 * index, 6 * (index + 1)).length)"></div>
                </dd>
              </template>
            </dl>
          </template>
        </Skeleton>

      </li>
    </ul>
    <Skeleton :loading="loading">
      <template #ske>
        <div class="Provider">
          <div class="title" style="padding-left: 0;margin-bottom: 15px;">
            <el-skeleton-item variant="text" style=" width: 150px;height: 30px;" />
          </div>
          <div style="display: flex;justify-content: flex-start;align-items: center;">
            <el-skeleton-item v-for="(item, index) in imglist" :key="index" variant="text"
              style=" width: 10%;height: 36px;margin-right: 15px;" />
          </div>
        </div>
      </template>
      <template #main>
        <div class="Provider">
          <div class="title">
            <NuxtImg src="/img/c26.png" alt="" />
            <span>{{ $t("language.home.module6") }}</span>
          </div>
          <dl>
            <dd v-for="(item, index) in imglist" :key="index">
              <NuxtImg :src="item" alt="" />
            </dd>
          </dl>
        </div>
      </template>
    </Skeleton>
    <Skeleton :loading="loading">
      <template #ske>
        <div style="width: 100%;margin-top: 20px;">
          <el-skeleton-item variant="image" style=" width: 100%;height: 200px;border-radius: 15px;" />
        </div>
      </template>
      <template #main>
        <div class="content">
          <NuxtImg class="contentimg" src="/img/contentimg.jpg" alt="" />
          <div>
            <h1>
              <span>300%</span> {{ $t("language.home.module7") }}
              {{ $t("language.home.module7no") }}
            </h1>
            <h1>{{ $t("language.home.module8") }}</h1>
            <div class="btn">
              {{ $t("language.home.module8btn") }}
            </div>
          </div>
        </div>
      </template>
    </Skeleton>


    <!-- <dl class="competition">
      <dd></dd>
    </dl> -->
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, shallowRef, shallowReactive, onMounted } from "vue"
import * as CryptoJS from "crypto-js";
import { Search } from '@element-plus/icons-vue'
const privider = shallowRef<string>('')
const tags = shallowRef<string>('')
const player = shallowRef<string>('')
let searchValue = shallowRef<string>("")
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
let loading = shallowRef<boolean>(false)
onMounted(() => {
  let time: any = null
  time = setTimeout(() => {
    loading.value = false
    clearTimeout(time)
  }, 1000)

})
let store = useStore()
//轮播图
const images = shallowReactive<string[]>([
  "banner.jpg",
  "banner1.jpg",
  "banner2.jpg",
]);
onMounted(() => {

})
// 动态设置ref
let hangleGameList = HomeGameList.map((i: any) => {
  i['start'] = 1
  return i
});
type refItem = Element | ComponentPublicInstance | null;
const swiperMap: any = ref({});
const handleSetFromMap = <T>(el: refItem, index: number, item: T) => {
  if (el) {
    swiperMap.value[`swiper${index}`] = el;
  }
};

const nextlist = (item: any, index: number) => {
  let time = getList(item.children)
  let step = 100 / time
  let move = null

  if (time - hangleGameList[index]['start'] >= 1) {
    move = step * hangleGameList[index]['start']
    hangleGameList[index]['start']++
  }
  swiperMap.value[`swiper${index}`].style.transform = `translateX(-${move}%)`
}
const prelist = (item: any, index: number) => {
  let time = getList(item.children)
  let step = 100 / time
  let move = null
  if (hangleGameList[index]['start'] - 2 >= 0) {
    move = step * (hangleGameList[index]['start'] - 2)
    hangleGameList[index]['start']--
  }
  swiperMap.value[`swiper${index}`].style.transform = `translateX(-${move}%)`
}
//整除
let getList = (list: any): number => {
  return Math.ceil(list.length / 6);
}
let activeindex = ref(0);
//tab
const tablist = shallowReactive([
  {
    lang: "language.home.tab1",
    img: "/img/tablist1.png",
    imgactive: "/img/tablist1l.png",
    callback: (index: number) => {
      activeindex.value = index;

    },
  },
  {
    lang: "language.home.tab2",
    img: "/img/tablist2.gif",
    imgactive: "/img/tablist2.gif",
    callback: (index: number) => {
      activeindex.value = index;
      // emit('openTurn')
      store.$patch({ turnTable: true })

    },
  },
  {
    lang: "language.home.tab3",
    img: "/img/tablist3.png",
    imgactive: "/img/tablist3.png",
    callback: (index: number) => {
      activeindex.value = index;
      store.$patch({ terouro: true })
    },
  },
  {
    lang: "language.home.tab4",
    img: "/img/tablist4.png",
    imgactive: "/img/tablist4l.png",
    callback: (index: number) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab5",
    img: "/img/tablist5.png",
    imgactive: "/img/tablist5l.png",
    callback: (index: number) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab6",
    img: "/img/tablist6.png",
    imgactive: "/img/tablist6l.png",
    callback: (index: number) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab7",
    img: "/img/tablist7.png",
    imgactive: "/img/tablist7l.png",
    callback: (index) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab8",
    img: "/img/tablist8.png",
    imgactive: "/img/tablist8l.png",
    callback: (index: number) => {
      activeindex.value = index;
    },
  },
]);
//provide
let imglist = shallowReactive([
  "/img/c17.png",
  "/img/c18.png",
  "/img/c19.png",
  "/img/c20.png",
  "/img/c21.png",
  "/img/c22.png",
  "/img/c23.png",
  "/img/c24.png",
]);
//跳转游戏
let coininfo = computed(() => store.coininfo)
let cointype = computed(() => store.cointype)
let userinfo = computed(() => store.userinfo)
let lang: any = computed(() => store.lang)
let token = computed(() => store.token)
let openurl = async (bigitem: any) => {
  // activeitem.value = item;
  if (token.value == "") {
    store.$patch({ loginopen: true })
    return
  }
  if (bigitem.game_uid) {
    ElLoading.service({
      lock: true,
      background: 'rgba(0, 0, 0, 0.7)',
      customClass: 'el-loading'
    })
    let timestamp = new Date().getTime();

    let { totalCoins } = coininfo.value[cointype.value.toLowerCase()]
    let payload = {
      timestamp,
      agency_uid: "6cc66b6b809048859f15905547f49611",
      member_account: userinfo.value.accounts,
      game_uid: bigitem.game_uid,
      credit_amount: Number(totalCoins) / 100,
      currency_code: cointype.value,
      language: lang.value.lang,
      home_url: "http://192.168.12.111:8088/",
      platform: 2
    }
    // let {totalCoins} =coininfo.value[coinType.value.toLowerCase()]
    // let payload = {
    //   timestamp,
    //   agency_uid: "6cc66b6b809048859f15905547f49611",
    //   member_account: '999',
    //   game_uid: bigitem.game_uid,
    //   credit_amount: "80000",
    //   currency_code: "BRL",
    //   language: "pt",
    //   home_url: "https://c.u7games.com/Game/v1.0/Web/Notify/Back",
    //   platform: 2
    // }
    console.log(payload, 'payload');
    //AES256加密
    const aes_key = CryptoJS.enc.Utf8.parse("ec42141e4fc04606a9de6dbb613a587a");
    function encryptAES256(data: string, aes_key: any): string {
      return CryptoJS.AES.encrypt(data, aes_key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      }).toString();
    }
    //请求    
    await nextTick()
    useOtherPOST(`/game/v1`, {
      method: "dc80cff0e5a94e9cb48c8394877e962b",
      agency_uid: "6cc66b6b809048859f15905547f49611",//替换 key
      timestamp,
      payload: encryptAES256(JSON.stringify(payload), aes_key)
    }).then(({ data }: { data: any }) => {
      console.log(data);
      if (data.value.payload.game_launch_url) {
        // router.push({ path: '/playGame', query: { path: data.payload.game_launch_url } })
        window.open(data.value.payload.game_launch_url)
      }
    }).finally(() => {
      ElLoading.service({
        lock: true,
        background: 'rgba(0, 0, 0, 0.7)',
        customClass: 'el-loading'
      }).close()
      // let time = setInterval(() => {
      //   ElLoading.service({
      //     lock: true,
      //     background: 'rgba(0, 0, 0, 0.7)',
      //     customClass: 'el-loading'
      //   }).close()
      //   clearInterval(time)
      // }, 300)
    });



  }


};
// navigateTo('/search')
</script>
<style lang="scss">
.tabcontexts {
  .el-select .el-input.is-focus:not(.el-input--prefix) .el-input__inner:focus {
    box-shadow: none !important;
  }

  .el-input__wrapper {
    height: 36px !important;

    &:hover {
      border-color: #0a906c !important;
    }
  }

  .is-focus {
    border-color: #0a906c !important;
  }

  .el-select__wrapper {
    border: 1px solid rgb(74, 76, 83) !important;
  }

  .el-select,
  .el-select__wrapper {
    background-color: rgb(39, 42, 48) !important;
    box-shadow: none !important;
    outline: none !important;
    color: #fff !important;
    height: 36px;
    border-radius: 10px;



    .el-select__placeholder {
      color: #fff !important;
      background-color: rgb(39, 42, 48) !important;
    }

    .is-focused {
      color: #fff !important;
      border: 1px solid #0a906c !important;
      box-shadow: none !important;
      outline: none !important;
    }


  }




}

.el-scrollbar__wrap,
.el-popper,
.el-select-dropdown,
.el-scrollbar,
.el-scrollbar__view,
.el-select-dropdown,
.el-select-dropdown__wrap,
.el-select-dropdown__list {
  background-color: rgb(39, 42, 48) !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;



  .is-selected {
    color: #fff !important;
    background-color: rgb(50, 53, 62) !important;
    font-weight: bold;
  }

  .is-hovering {
    color: #fff !important;

    font-weight: bold;
    background-color: rgb(50, 53, 62) !important;
  }
}

.el-popper__arrow::before {
  background-color: rgb(39, 42, 48) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
</style>
<style scoped lang="scss">
.index {
  width: 100%;

  .banner {
    width: 100%;

    .img {
      width: 100%;
      @include flex(row, space-between, center);

      img {
        width: 32.6%;
        border-radius: 10px;

      }


    }

    .dot {
      width: 25px;
      height: 10px;
      border-radius: 7px;
      margin: 8px auto 0;
      background-color: #fff;
      opacity: 1;
      transition: all 0.3s;

      cursor: pointer;

      &:hover {
        opacity: 0.6;
      }
    }


  }

  .notice {
    height: 42px;
    width: 100%;
    background-color: #0f1012;
    border-radius: 5px;
    margin-top: 15px;
    padding-left: 10px;

    img {
      width: 26px;
    }

    @include flex(row, flex-start, center);
  }

  .tablist {
    width: 100%;
    padding: 10px 0;
    @include flex(row, flex-start, center);
    flex-wrap: nowrap;
    overflow-x: auto;

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      display: block !important;

    }

    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-color: rgb(50, 53, 62);
    }

    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: transparent;
    }

    .active {
      background-color: #0a906c;

      span {
        color: #fff;
      }
    }




    div {
      flex-shrink: 0;
      height: 36px;
      line-height: 36px;
      padding: 0 8px;


      display: flex;
      align-items: center;
      cursor: pointer;
      background-color: #32353e;
      border-radius: 5px;
      color: #b5bac8;

      img {
        height: 20px;
        margin-right: 6px;
      }

      span {
        font-size: 16px;
        color: #b5bac8;
        height: 100%;
        white-space: nowrap;
      }
    }


    div+div {
      margin-left: 24px;
    }
  }

  .tabcontexts {
    width: 100%;
    @include flex(row, space-between, center);
    transform-origin: left top;
    padding: 0;
    transform: scaleY(0);
    transition: transform 0.2s ease-in;

    // position: absolute;
    div {
      height: 0;
    }

    div:nth-child(1) {
      flex: 1;

      .el-select+.el-select {
        margin-left: 20px;
      }
    }

    div:nth-child(2) {
      width: 240px;


    }
  }

  .appearcontext {
    transform: scaleY(1);
    padding: 10px 0 30px 0;
    position: static;

    div {
      height: 36px;
    }
  }

  .game {
    width: 100%;
    overflow: hidden;

    li {
      width: 100%;

      .title {
        width: 100%;
        @include flex(row, space-between, center);
        margin: 18px 0;

        .title-left {
          @include flex(row, flex-start, center);

          img {
            width: 24px;
            margin-right: 10px;
          }

          span {
            font-size: 24px;
            color: #fff;
          }
        }

        .title-right {
          @include flex(row, flex-end, center);

          strong {
            width: 150px;
            display: block;
            height: 30px;
            color: #fff;
            font-weight: normal;
            background-color: #0f1012;
            line-height: 30px;
            border-radius: 5px;
            text-align: center;
            margin-right: 20px;

          }

          .changeimg {
            width: 30px;
            border-radius: 5px;
            cursor: pointer;
          }

          .changeimg+.changeimg {
            margin-left: 10px;

          }

          .opacity {
            opacity: 0.4;
          }
        }
      }



      dl {
        transition: all 0.4s ease-in-out;
        @include flex(row, flex-start, center);
        overflow-x: auto;
        flex-wrap: nowrap;

        dd {
          cursor: pointer;
          width: 100%;
          @include flex(row, space-between, flex-start);



          >div {
            width: 15%;
            transition: all 0.4s ease;


            &:hover {
              transform: translateY(-15px);
            }

            h3 {
              color: #fff;
              height: 38px;
              line-height: 38px;
              font-size: 16px;
            }

            .mainimg {
              width: 100%;
              position: relative;
              padding-bottom: 136.4%;


              img {
                width: 100%;
                border-radius: 15px;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
              }

              .target {
                position: absolute;
                left: 0;
                top: 0;
                width: 50px;
                height: 40px;
                border-radius: 0px;
              }
            }

          }
        }
      }
    }

  }

  .Provider {
    padding-top: 20px;
    background-color: #1a1a1a;

    width: 100%;

    .title {
      height: 36px;
      line-height: 36px;

      img {
        width: 24px;
        height: 24px;
        margin-right: 15px;
      }

      span {
        font-size: 24px;
        color: #fff;
      }
    }

    dl {
      width: 100%;
      padding: 3px 10px 15px 0px;
      overflow-x: auto;
      @include flex(row, flex-start, center);


      &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        display: block !important;
        ;

      }

      &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgb(50, 53, 62);
      }

      &::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: transparent;
      }


      dd {
        background-color: #32353e;
        flex: 1;
        border-radius: 5px;
        padding: 10px 20px;
        @include flex(row, flex-start, center);

        img {
          width: 100%;
        }
      }

      dd+dd {
        margin-left: 10px;
      }
    }
  }

  .content {
    width: 100%;
    margin-top: 20px;
    position: relative;

    .contentimg {
      width: 100%;
    }

    >div {
      position: absolute;
      right: 20px;
      top: 17%;

      h1 {
        width: 280px;
        font-size: 24px;
        color: #fff;
        margin: 0px auto 14px;

        span {
          font-size: 24px;
          color: rgb(102, 185, 102);
        }
      }

      .btn {
        width: 100%;
        margin: 0 auto;
        height: 42px;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        line-height: 42px;
        color: #fff;
        background-color: rgb(37, 154, 6);
      }
    }
  }



}
</style>